<template>
  <div class="hello">
    <ul>
      <li @click="toPushOne(1)">homePage</li>
      <li @click="toPushOne(2)">pageView2</li>
      <li @click="toPushOne(3)">pageView3</li>
      <li @click="toPushOne(4)">pageView4</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'toEveryOne',
  props: {
    msg: String
  },
  methods: {
    getToPathFn(key){
      switch (key) {
        case 1:
          return '/';
        case 2:
          return '/pageView2';
        case 3:
          return '/pageView3';
        case 4:
          return '/pageView4';
        default:
          return '/'
      }
    },  
    toPushOne(type) {
      console.log(this,'toPushOne')
      let toPath = this.getToPathFn(type);
      if(this.$route.path !== toPath){
        this.$router.replace(toPath);
      }
    },
    
    
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
